<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        
        function animate(dom, cssObj, time, callback) {
            //获取元素的当前所有css属性
            var objAll = getComputedStyle(dom)
            //获取当前要修改属性的初始值
            var obj1 = {}
            for (var i in cssObj) {
                obj1[i] = parseInt(objAll[i])
            }
            //设置 20-50 毫秒内执行一次,打到动画帧效果 ,先拿到总次数
            var countAll = time / 20 //设置20毫秒一次 
            //记录 运动次数
            var count = 0
            var timer = setInterval(function(){
                count++
                for(var i in cssObj){
                    //循环 cssobj 的每一项 设置当前 dom元素的每一条属性 = 初始值 + (终点 - 初始) / 要分几次完成 * 当前次数 
                    dom.style[i] = obj1[i] + ( cssObj[i] - obj1[i] ) / countAll * count +"px"
                }
                //判断 当前步数 等于 总步数 完成结束
                if(count >= countAll){
                    clearInterval(timer)
                    // 结束 执行 回调函数
                    callback && callback()
                }
            },20)
        }
        var box = document.getElementById("box")
        console.log(box);
        box.onclick = function(){
            animate(box,{opacity:0.4},1000)
            console.log(1);
        }
    </script>
</body>

</html>